<template>
<div>
	<div class="hotComment" v-if="hiddent==0" >
		<h4 class="comtitle"  >精彩评论</h4>
		<div class="comsitem" v-for="(item,index) in hotcoms" v-if="index<6" >
			<!--头像-->
			<div class="comhead">
				<img :src="item.user.avatarUrl" alt="" class="comImg" />
			</div>
			<!--评论内容-->
			<div class="com-comtent">
				<!--评论头-->
				<div class="cmt-header">
					<!--左边-->
					<div class="cmt-left">
						<span class="cmt-user">
							{{item.user.nickname}}
						</span>
						<div class="cmt-time">
							{{transDeTime(item.time)}}
						</div>
					</div>
					<!--右边-->
					<div class="cmt-right">
						<div class="cmt-like">
							<span class="cmt-count">{{item.likedCount}}</span>
							<i class="likeicon">
								<like></like>
							</i>
						</div>
					</div>
					
					
					
				</div>
				<!--评论内容-->
				<div class="cmt-con">
					{{item.content}}
				</div>
			</div>
			
			
			
			
		</div>
	
	
	</div>
	
	<div class="hotComment" v-if="hiddent==1" >
		<div class="comsitem" v-for="(item,index) in hotcoms"  >
			<!--头像-->
			<div class="comhead">
				<img :src="item.user.avatarUrl" alt="" class="comImg" />
			</div>
			<!--评论内容-->
			<div class="com-comtent">
				<!--评论头-->
				<div class="cmt-header">
					<!--左边-->
					<div class="cmt-left">
						<span class="cmt-user black">
							{{item.user.nickname}}
						</span>
						<div class="cmt-time black">
							{{transDeTime(item.time)}}
						</div>
					</div>
					<!--右边-->
					<div class="cmt-right">
						<div class="cmt-like">
							<span class="cmt-count">{{item.likedCount}}</span>
							<i class="likeicon">
								<like></like>
							</i>
						</div>
					</div>
					
					
					
				</div>
				<!--评论内容-->
				<div class="cmt-con black">
					{{item.content}}
				</div>
			</div>
			
			
			
			
		</div>
	
	
	</div>
	
	<div class="hotComment" v-if="hiddent==2" >
		
		<div class="comsitem" v-for="(item,index) in hotcoms" v-if="index<9" >
			<!--头像-->
			<div class="comhead">
				<img :src="item.user.avatarUrl" alt="" class="comImg" />
			</div>
			<!--评论内容-->
			<div class="com-comtent">
				<!--评论头-->
				<div class="cmt-header">
					<!--左边-->
					<div class="cmt-left">
						<span class="cmt-user black">
							{{item.user.nickname}}
						</span>
						<div class="cmt-time black">
							{{transDeTime(item.time)}}
						</div>
					</div>
					<!--右边-->
					<div class="cmt-right">
						<div class="cmt-like">
							<span class="cmt-count black">{{item.likedCount}}</span>
							<i class="likeicon">
								<like></like>
							</i>
						</div>
					</div>
					
					
					
				</div>
				<!--评论内容-->
				<div class="cmt-con black">
					{{item.content}}
				</div>
				<div class="replied" v-for="(i,index) in item.beReplied">
					@{{i.user.nickname}}：{{i.content}}
				</div>
			</div>
			
			
			
			
		</div>
	
	
	
		<div class="lookAll">
			查看全部100条评论
		</div>
	
	</div>
	
	
</div>

	
	
</template>

<script>
import like from '@/svg/like.svg'
	
export default {
	
	
	
	name:'hotComment',
//	props:['hotcoms','limit',"hiddent"],
	props:{
		hotcoms:{
			type:[String,Object,Array]
		},
		hiddent:{
			type:[Boolean,Number,String],
			default:0
		}
	},
	components:{
		like
	},
	methods:{
		transTime(t){
			var time = new Date(t);
//			console.log(time.getFullYear())
			
			return time.getFullYear()+'年'+time.getMonth()+'月'+time.getDate()+'日'
		},
		transDeTime(t){
			var time = new Date(t);
			let now = new Date();
			let today = new Date(now.getFullYear()+'-'+(now.getMonth()+1)+'-'+now.getDate());
//			let today = new Date('2018-11-9');
			let yesterday = new Date(now.getFullYear()+'-'+(now.getMonth()+1)+'-'+(now.getDate()-1));
//			return time/1000;
			let sec = time/1000;
			let nowsec = now/1000;
			let todaysec= today/1000;
			let yesec = yesterday/1000;
			if(sec>todaysec){
				if(nowsec-sec<3600){
					if((nowsec-sec)/60<1){
						return '刚刚'
					}else{
						return ~~((nowsec-sec)/60)+'分钟前'
					}
				}else
				
				
				return time.getHours()+':'+time.getMinutes()
			}else
			if(sec>yesec){
				return "昨天"+time.getHours()+':'+time.getMinutes()
			}else{
				return time.getFullYear()+'年'+time.getMonth()+'月'+time.getDate()+'日'
			}
		}
	}
}
	
</script>

<style lang="scss" scoped="scoped">
@import '../scss/common';
@import '../scss/reset';

.lookAll{
	/*margin-right: r(100px);*/
    padding: r(36px) 0;
    font-size: r(28px);
    color: #999;
    text-align: center;
    line-height: 1;
    margin-bottom: r(100px);
}
.replied{
	text-align: left;
	margin: r(10px) 0;
    padding: r(20px);
    color: #888;
    font-size: r(28px);
    line-height: r(42px);
    position: relative;
    border: r(2px) solid rgba(0,0,0,0.1);
}
.hotComment{

}
.comtitle{
	position: relative;
    padding: 0 0 0 r(20px);
    line-height: r(50px);
    color: #fff;
    font-size: r(32px);
    background-color: transparent;
    text-align: left;
    &::after{
    	content: "";
	    display: block;
	    width: r(4px);
	    height: r(32px);
	    position: absolute;
	    top: r(8px);
	    left: 0;
	    background: #d33a31;
    }
}
.comsitem{
	padding-top: r(20px);
    width: 100%;
    display: -webkit-flex;
    display: -webkit-box;
    display: flex;
    -webkit-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
}
.comhead{
	height: r(70px);
	width: r(75px);
	margin: 0 10px;
    -webkit-flex: none;
    -webkit-box-flex: 0;
    flex: none;
   	position: relative;
   	
   	
    
}
.comImg{

	position: absolute;
	left: 0;
	height: 100%;
	top: 0;
	width: 100%;
	border-radius: 50%;

}
.com-comtent{
	padding-right: r(20px);
    padding-bottom: r(22px);
    /*padding-left: r(20px);*/
    -webkit-flex: auto;
    -webkit-box-flex: 1;
    flex: auto;
    width: 0;
    position: relative;
}
.cmt-header{
	display: -webkit-flex;
    display: -webkit-box;
    display: flex;
    -webkit-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    .cmt-left{
    	-webkit-box-flex: 1;
	    flex: auto;
	    width: 0;
	    font-size: 0;
    }
    text-align:left;
    
}
.cmt-user{
	max-width: 100%;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    font-size: r(30px);
    color: rgba(255,255,255,.7);
    
}
.cmt-time{
	font-size: r(18px);
	color: rgba(255,255,255,.5);
}
.cmt-right{
	width: r(130px);
    height: r(44px);
    line-height: r(44px);
    font-size: r(22px);
    color: #999;
    -webkit-flex: none;
    -webkit-box-flex: 0;
    flex: none;
    text-align: right;
    .cmt-like{
    	display: inline-block;
	    min-width: r(60px);
	    padding-left: r(10px);
	    
    }
}
.cmt-count{
	vertical-align: middle;
}
.likeicon{
	display: inline-block;
    width: r(28px);
    height: r(28px);
    margin-left: r(12px);
    line-height: 0;
    vertical-align: middle;
    cursor: pointer;
}
.cmt-con{
	color: #fff;
    font-size: r(30px);
    line-height: r(44px);
    margin-top: r(10px);
    text-align: left;
    padding-bottom: r(20px);
    border-bottom: r(2px) solid rgba(255,255,255,0.1);
}
.black{
	color: black;
}
</style>